<template>
    <MenuBar class="menu-bar">

      <div slot="left" class="left" v-if="hToken.username !== ''">
        <a @click="mUserInfo">你好,{{hToken.username}}</a>|
        <a @click="mExitClick(token)">退出</a>
      </div>
      <div slot="left" class="left" v-else>
        <a @click="mLoginClick">您未登录,请登录</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a @click="mRegisterClick">免费注册</a>
      </div>


        <div class="center-words-item" slot="center">
         <div><a href="" @click="carClick">购物车</a></div>
        </div>

        <div class="center-menu-item" slot="center"
             v-for="(item, index) in topMenuItems"
             :class="{active: index === currentIndex}"
             @mouseover="mEnterItem(index)">

          <div><a href="#">{{item.menu}}^</a></div>

          <div class="show" v-if="index === currentIndex" @mouseleave="mOutItem">
              <div v-for="item_context in item.context"><a @click="itemContentClick(item_context.link)">{{item_context.title}}</a></div>
          </div>
        </div>




      <div slot="right" class="right">
        <a class="right-item">手机端</a>
        <a class="right-item" href="#">关于我们</a>
        <a class="right-item" href="#">联系站主</a>
        <a class="right-item" href="" v-if="hToken.username === '1365137828'" @click="goAdminEnd">去后台</a>
      </div>

    </MenuBar>
</template>

<script>

  import MenuBar from "components/common/menubar/MenuBar";

  // 混入的导入,
  // import {tokenVer} from "../../../common/mixins" //导入混入

  import {verToken} from 'common/utils'

  import {mapGetters} from 'vuex'

  export default {
    name: "TopMenuBar",
    // mixins: [tokenVer],
    components: {
      MenuBar,

    },
    data () {
      return {
        currentIndex: 999,
        hToken:{
          username: '',
          business: 2,
        },
        topMenuItems: [
          {
            menu: '我的订单',
            context: [
              {title: '已买商品', link: '/user/order'},
              {title: '已卖商品', link: '/user/order'}
            ]
          },
          {
            menu: '我的店铺',
            context: [
              {title: '店铺商品', link: '/user'},
              {title: '进货中心', link: '/user'}
            ]
          },
          {
            menu: '我的收藏',
            context: [
              {title: '收藏商品', link: '/user'},
              {title: '收藏店铺', link: '/user'}
            ]
          }
        ]
      }
    },
    computed: {
      ...mapGetters ({
        token: 'getToken'
      })
    },
    created() {
      if (this.token) {
        this.hToken.username = verToken(this.token).username
        this.hToken.business = verToken(this.token).business
      }
    },
    activated() {
      if (this.token) {
        this.hToken.username = verToken(this.token).username
        this.hToken.business = verToken(this.token).business
      }
    },
    methods: {
      mEnterItem (index) { //
        this.currentIndex = index
      },
      mOutItem () {
        this.currentIndex = 999
      },
      mUserInfo() {
        this.$router.push('/user')
      },
      mLoginClick () {
        console.log('loginClick');
        this.$router.push('/login')
      },
      mExitClick (token) {
        // console.log('remove token:'+token);
        // this.$store.dispatch('aDestroyToken', token)
        this.$store.dispatch('aDestroyState', {})
          .then(res => {
            console.log(res);
            this.hToken.username = ''
            this.hToken.business = ''
          })
      },
      mRegisterClick () {
        this.$router.push('/register')
      },
      carClick() {
        if (this.token) {
          this.$router.push('/user/car')
        } else {
          this.$router.push('/login')
        }
      },
      itemContentClick(link) {
        if (this.token) {
          this.$router.push(link)
        } else {
          this.$router.push('/login')
        }
      },
      goAdminEnd() {
        this.$router.push('/admin')
      },
      // mGetNavClick () {
      //   console.log('点击请求')
      //   getRootNavData()
      //     .then(res => { /***/
      //       console.log(res);
      //     })
      //   .catch(err => { /**response响应错误*/
      //     console.log('err=' + err);
      //     this.$router.push('/login')
      //   })
      // }
    }
  }
</script>

<style scoped>
  .menu-bar {
    position: relative;

    height: 25px;
    line-height: 25px;
    background-color: #eee;

    color: #707070;
    font-size: 13px;

    /*box-shadow: 0 0 1px rgba(86, 86, 86, 1);*/
  }
  .left {
    margin-left: 120px;
    cursor: pointer; /*放上变手指*/
  }
  .left a:hover {
    color: red;
  }
  .right {
    position: absolute;
    right: 100px;
  }
  .center-menu-item {
    flex: 1;
    position: relative;
  }
  .center-menu-item div {
    position: absolute;
    left: 0;
  }
  .center-words-item {
    flex: 1;
    position: relative;
  }
  .center-words-item div {
    position: absolute;
    left: 0;
  }
  .right-item {
    margin-left: 50px;
  }
  .active {
    background-color: #fff;
  }
  .show {
    position: relative;
    display: flex;
    top: 25px;
    left: 100px;

    flex-wrap: wrap;/*默认为nowrap,不包裹;设置为wrap<包裹>,会根据展示大小自动决定一行显示多少个元素*/
    justify-content: space-around;/*设置每行均等分*/

    height: 500%;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 0 2px rgba(100, 100, 100, 0.7);

    z-index: 9;
  }
  .show div {
    position: relative;
    top: 10%;
    bottom: 10%;
    margin: 3%;
    padding: 2%;

    height: 20%;
    color: #707070;
  }
  .show div a:hover {
    cursor: pointer;
  }
</style>